<template>
	<view class="totalOrder" :style="{'padding-top':titleHeight + 'px'}">
		<title :center="false" @titleHeight='setPaddingTop' title="全部订单" icon="icon" iconSize="38" color="#2e2e2e"
		 :bold="false" bgcolor="#fff" @toclick="toBack(1)"></title>
		 <view class="totalOrder-content">
		 	<view class="orders_box">
		 		<view class="item" @tap="toOrder('movie')">
					<view class="left">
						<image src="/subpages/static/totalOrder-moiveOrderIMG.png" mode=""></image>
						电影订单
					</view>
					<view class="right">
						<image src="/static/img/other/more.png" mode=""></image>
					</view>
		 		</view>
				<!-- <view class="item" @tap="toOrder('coupon')">
					<view class="left">
						<image src="/subpages/static/totalOrder-couponOrderIMG.png" mode=""></image>
						卡券订单
					</view>
					<view class="right">
						<image src="/static/img/other/more.png" mode=""></image>
					</view>
				</view>
				<view class="item" @tap="toOrder('goods')">
					<view class="left">
						<image src="/subpages/static/totalOrder-goodsOrderIMG.png" mode=""></image>
						实物订单
					</view>
					<view class="right">
						<image src="/static/img/other/more.png" mode=""></image>
					</view>
				</view> -->
		 	</view>
		 </view>
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	export default {
		data() {
			return {
				titleHeight:0,
			}
		},
		components: {
			title
		},
		methods: {
			toBack(index){
				this.$common.toBack(index)
			},
			setPaddingTop(data){
				console.log(data);
				this.titleHeight = data.height
			},
			// 去往不同的订单页面
			toOrder(type){
				switch (type){
					case 'movie':
						this.$common.toLink('/subpages/cinema_ticket/cinema_ticket?type=total')
						break;
					case 'coupon':
						this.$common.toLink('/subpages/cinema_ticket/cinema_ticket?type=coupon')
						break;
					case 'goods':
						this.$common.toLink('/subpages/life/orderList')
						break;
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.totalOrder {
	height: 100vh;
	width: 100vw;
	>.totalOrder-content {
		background-color: #F4F4F4;
		border-radius: 12rpx;
		height: 100%;
		padding: 20rpx;
		overflow: hidden;
		>.orders_box {
			background-color: #fff;
			padding: 0 20rpx;
			>.item {
				border-bottom: 2rpx solid rgba(221,221,221,0.8);
				padding: 28rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				>.left {
					display: flex;
					align-items: center;
					
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #1D2129;
					line-height: 32rpx;
					>image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 12rpx;
					}
				}
					
				>.right {
					>image {
						width: 28rpx;
						height: 28rpx;
					}
				}
				&:last-child {
					border: none;
				}
			}
		}
	}
}
</style>
